<template>
  <div class="mine">
    <!-- {{list}} -->
    <div class="bg"></div>
    <!-- 显示弹窗 -->
    <van-popup v-model="showp">
      <van-image cover width="10rem" height="10rem" :src="userall.userFace" />
    </van-popup>
    <!-- 用户显示 -->
    <div class="userinfo">
      <!-- 用户头像 -->
      <div class="userImage">
        <img
          :src="userall.userFace"
          alt=""
          class="imguser"
          @click="showphoto"
        />
        <p class="name">{{ userall.username }}</p>
      </div>
      <p class="nam">梦想成为优秀打工人的打工人</p>
      <div class="flex">
        <div class="flex_item">
          <p>已完成</p>
          <p>{{ statusFinish }}</p>
        </div>
        <div class="flex_item">
          <p>待服务</p>
          <p>{{ statusServed }}</p>
        </div>
        <div class="flex_item">
          <p>待接单</p>
          <p>{{ statusReceived }}</p>
        </div>
        <div class="flex_item">
          <p>余额</p>
          <p>{{ userall.balance }}</p>
        </div>
      </div>

      <div class="cellArea">
        <van-cell
          title="实名认证"
          icon="orders-o"
          is-link
          @click="jmpAuthen"
          class="van-cell van-cell--clickable"
        >
        </van-cell>
        <van-cell
          title="提现"
          icon="gold-coin-o"
          is-link
          @click="jmpWithdrawal(userall.id)"
          class="van-cell van-cell--clickable"
        >
        </van-cell>
        <van-cell
          title="收益信息"
          icon="bill-o"
          is-link
          @click="jmpHelp"
          class="van-cell__value van-cell__value--alone"
        >
        </van-cell>
        <van-cell
          title="个人信息"
          icon="user-o"
          is-link
          @click="jmpPersonInfo(userall.id)"
          class="van-cell__value van-cell__value--alone"
        >
        </van-cell>
      </div>

      <div class="empty"></div>
      <!-- 退出登录 -->
      <div class="logout_btn">
        <van-button
          type="primary"
          block
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="LoginOut"
          >退出登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      token: "",
      userall: "",
      showp: false,
      list: [],
      statusFinish: 0,
      statusServed: 0,
      statusReceived: 0,
      id: "",
    };
  },
  methods: {
    //获取所有用户的数据
    async getUserInfo(userall) {
      let obj = {
        token: this.token,
      };
      let res = await get("/user/info", obj);
      this.userall = res.data.data;
      this.id = this.userall.id;
      let userid = this.userall.id;
      this.getAllOrder(userid);
    },

    showphoto() {
      this.showp = true;
    },

    //实名认证
    jmpAuthen() {
      this.$router.push({
        path: "/manager/authentication",
        query: {
          userall:this.userall,
        },
      });
    },
    //提现
    jmpWithdrawal(userid) {
      this.$router.push({
        path: "/manager/withdrawal",
        query: {
          userid,
        },
      });
    },
    //收益信息
    jmpHelp() {
      this.$router.push({
        path: "/manager/help",
      });
    },
    //个人信息
    jmpPersonInfo(userid) {
      this.$router.push({
        path: "/manager/personinfo",
        query: {
          userid,
        },
      });
    },
    //获取所有订单信息
    async getAllOrder(userid) {
      let obj = {
        page: 1,
        pageSize: 100,
        employeeId: userid,
      };
      let res = await get("/order/pageQuery", obj);
      this.list = res.data.data.list;
      this.list.forEach((item) => {
        if (item.status == "已完成") {
          this.statusFinish++;
        } else if (item.status == "待服务") {
          this.statusServed++;
        } else {
          this.statusReceived++;
        }
      });
    },

    //退出登录
    async LoginOut() {
      let res = await post("/user/logout");
      Toast.success("退出成功！");
      // 定时函数
      setTimeout(() => {
        this.$router.push({
          path: "/login",
        });
        //删除token
        localStorage.removeItem("token");
      }, 500);
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    // 获取用户token
    this.getUserInfo(this.token);
  },
  computed: {},
};
</script>

<style scoped>
.body {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
    Microsoft Yahei, sans-serif;
}
/* 背景 */
.bg {
  height: 180px;
  background-image: linear-gradient(to right, #2bc0e4, #eaecc6);
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
/* 用户信息 */
.userinfo {
  width: 88%;
  height: 170px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: rgb(204 204 204) 0px 0px 10px;
  position: absolute;
  top: 170px;
  transform: translate(-50%, -50%);
  left: 50%;
  /* margin-left: -40%; */
  opacity: 0.8;
  border-radius: 8px;
}
.userinfo .userImage {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  background-color: blueviolet;
  transform: translate(-50%, -50%);
  /* top: 13%; */
}
.imguser {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.name {
  margin: 3.5em;
  text-align: center;
  margin: 0 auto;
}
.nam {
  /* margin: 3.5em; */
  text-align: center;
  margin: 0 auto;
  font-size: 13px;
  color: #2bc0e4;
  margin-top: 76px;
}
.flex {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
  margin-top: -10px;
}
.userinfo .flex .flex_item {
  width: 20%;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.userinfo .flex .flex_item p:first-child {
  margin-top: 25px;
  font-size: 11px;
  color: #999;
}
.userinfo .flex .flex_item p:last-child {
  font-size: 22px;
  margin-top: -10px;
  color: #7579ff;
}
.flex_item:first-child {
  /* margin-top: 1px; */
  font-size: 16px;
  color: #999;
}
.cellArea {
  margin: 70px auto;
  box-shadow: rgb(158 117 255 / 20%) 4px 4px 4px 0px;
  transition: all 0.3s ease 0s;
  width: 100%;
  border-radius: 5px;
}
.van-cell--clickable {
  cursor: pointer;
}
.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}

.logout_btn {
  width: 53%;
  height: 100px;
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 22px;
  line-height: 40px;
  margin: 2em auto 0px;
  cursor: pointer;
}
</style>